// 基本情况-顶部卡片
import { useRef, useEffect } from "react"

import createXYChart3D from "../../../utils/createXYChart3D"

const BaseCard = ({ companyInfo = {}, orgInfo = {} }) => {
  const chartRef = useRef(null)
  const myChart = useRef(null)

  useEffect(() => {
    if (!myChart.current) {
      createXYChart3D(chartRef, myChart, orgInfo)
    }
  }, [orgInfo])

  return (
    <div className="flex justify-between mt-[13px] text-[14px]">
      {/* 企业概况 */}
      <div className="w-[408px] mr-[20px] h-[352px] border-1 border-white rounded-[8px] p-[12px]">
        <div
          className="h-[36px] leading-[36px]"
          style={{
            backgroundImage: `url('assistant-decision/base-title_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          <span className="ml-[30px] text-white text-[16px] font-[600]">
            企业概况
          </span>
        </div>
        <div
          className="mt-[10px] h-[47px] flex items-center text-[14px]"
          style={{
            backgroundImage: `url('assistant-decision/company-desc_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          <div
            className="h-[16px] w-[16px] mr-[7px]"
            style={{
              backgroundImage: `url('assistant-decision/time_icon.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover"
            }}
          ></div>
          <div className="w-[66px]">公司名称</div>
          <div className="font-[600]">{companyInfo.companyName}</div>
        </div>
        <div
          className="mt-[10px] h-[47px] flex items-center text-[14px]"
          style={{
            backgroundImage: `url('assistant-decision/company-desc_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          <div
            className="h-[16px] w-[16px] mr-[7px]"
            style={{
              backgroundImage: `url('assistant-decision/time_icon.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover"
            }}
          ></div>
          <div className="w-[66px]">成立时间</div>
          <div className="font-[600]">{companyInfo.establishmentDate}</div>
        </div>
        <div
          className="mt-[10px] h-[47px] flex items-center text-[14px]"
          style={{
            backgroundImage: `url('assistant-decision/company-desc_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          <div
            className="h-[16px] w-[16px] mr-[7px]"
            style={{
              backgroundImage: `url('assistant-decision/power_icon.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover"
            }}
          ></div>
          <div className="w-[66px]">供电面积</div>
          <div className="font-[600]">
            <span className="text-[#008bff]">
              {companyInfo.powerSupplyArea}
            </span>
            万平方公里（占全省{companyInfo.powerSupplyAreaRatio}%）
          </div>
        </div>
        <div
          className="mt-[10px] h-[47px] flex items-center text-[14px]"
          style={{
            backgroundImage: `url('assistant-decision/company-desc_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          <div
            className="h-[16px] w-[16px] mr-[7px]"
            style={{
              backgroundImage: `url('assistant-decision/population_icon.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover"
            }}
          ></div>
          <div className="w-[66px]">供电人口</div>
          <div className="font-[600]">
            <span className="text-[#008bff]">
              {companyInfo.supplyPopulation}
            </span>
            万户
          </div>
        </div>
        <div
          className="mt-[10px] h-[47px] flex items-center text-[14px]"
          style={{
            backgroundImage: `url('assistant-decision/company-desc_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          <div
            className="h-[16px] w-[16px] mr-[7px]"
            style={{
              backgroundImage: `url('assistant-decision/relation_icon.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover"
            }}
          ></div>
          <div className="w-[66px]">隶属关系</div>
          <div className="font-[600]">{companyInfo.affiliation}</div>
        </div>
      </div>
      {/* 组织结构 */}
      <div className="w-[408px] h-[352px] border-1 border-white rounded-[8px] p-[12px]">
        <div
          className="h-[36px] leading-[36px]"
          style={{
            backgroundImage: `url('assistant-decision/base-title_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          <span className="ml-[30px] text-white text-[16px] font-[600]">
            组织结构
          </span>
        </div>
        <div ref={chartRef} className="w-full h-[300px]"></div>
      </div>
    </div>
  )
}

export default BaseCard
